<template>
    <div style="background-color: #f4f7fa;" v-loading="loading">
        <div class="search-container">
            <el-collapse-transition>
                <div v-show="searchShow">
                    <div class="warehouse">
                        <p class="title">
                            所在仓库
                            <Button size="small" @click="refresh">
                                <Icon type="md-refresh" :size="18"/>
                            </Button>
                        </p>
                        <div class="warehouse-container flex">
                            <div class="warehouse-item"
                                 :class="wareAllChecked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 @click="wareAllCheck">
                                <p class="flex">
                                    <span style="font-weight: 700;font-size: 16px;">全部</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{
                                            wareList && wareList.length > 0 ? (wareList.reduce((total, item) => total + item.whGoodsWeight, 0) / 1000).toFixed(6) : 0
                                        }}</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">柜数</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{
                                            wareList && wareList.length > 0 ? wareList.reduce((total, item) => total + item.whChestCount, 0) : 0
                                        }}</span>
                                </p>
                            </div>
                            <div v-for="item in wareList" :key="item.whId" class="warehouse-item"
                                 :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 @click="wareClick(item)">
                                <p class="flex">
                                    <span style="font-weight: 700;font-size: 16px;">{{ item.whName }}</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{
                                            (item.whGoodsWeight / 1000).toFixed(6)
                                        }}</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">柜数</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ item.whChestCount }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="stock" style="margin-top: 25px; position: relative;">
                        <p class="title">库存统计</p>
                        <Icon type="ios-arrow-dropleft" size="25"
                              style="position: absolute;left: 10px;top: calc(50% - 12px);cursor: pointer;"
                              @click="scrollChange('left')"/>
                        <Icon type="ios-arrow-dropright" size="25"
                              style="position: absolute;right: 10px;top: calc(50% - 12px);cursor: pointer;"
                              @click="scrollChange('right')"/>
                        <div id="mat-container" class="warehouse-container flex"
                             style="width: 100%; position: relative;overflow-x: auto">
                            <div v-for="(item, index) in matList" :key="index" class="warehouse-item"
                                 :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 style="height: 112px; padding-bottom: 10px" @click="matClick(item)">
                                <el-tooltip placement="top">
                                    <p style="height: 48px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
                                        {{ item.matName }}
                                    </p>
                                    <div slot="content">
                                        {{ item.matName }}
                                    </div>
                                </el-tooltip>
                                <p class="flex" style="justify-content: space-between">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{
                                            (item.goodsWeight / 1000).toFixed(6)
                                        }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-transition>
            <div class="bottom-btn" @click="searchShow = !searchShow">
                <Icon type="ios-menu" class="ios-menu"/>
            </div>
            <div class="bottom-btn2" style="left: calc(50% - 1px)">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            searchShow: true
        };
    }
};
</script>

<style scoped lang="less">
.font-bold {
    font-weight: 700;
}

.search-container {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(217, 217, 217, 1);

    .warehouse, .stock {
        padding: 0 50px;

        .title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }
    }

    .warehouse {
        padding-top: 30px;
    }

    .stock {
        padding-bottom: 30px;
    }

    .warehouse-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 236px;
        height: 102px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 20px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 10px;
        transition: all .5s;

        &:hover {
            .warehouse-item__checked {
                border: 1px solid rgba(79, 104, 232, 1);
                background-color: rgba(79, 104, 232, 0.1);
            }

            .warehouse-item__not-checked {
                border: 1px solid rgba(217, 217, 217, 1);
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }

    .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }

    .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
    }

    .bottom-btn, .bottom-btn2 {
        cursor: pointer;
        width: 50px;
        height: 0;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -20px;
        border-top: 20px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        text-align: center;
        z-index: 100;
        transition: all .3s;
        font-size: 20px !important;

        &:hover {
            transform: scale(1.2) translateY(1px);
        }

        &:hover + .bottom-btn2 {
            transform: scale(1.2) translateY(2px);
        }

        .ios-menu {
            position: absolute;
            top: -20px;
            right: 4px;
            transition: all .3s;
        }
    }

    .bottom-btn2 {
        width: 52px;
        bottom: -21px;
        border-top: 21px solid rgba(217, 217, 217, 1);
        z-index: 90;
    }
}
</style>
